import { Card, Image} from 'antd';
import {  SmileTwoTone } from '@ant-design/icons';
import './home.less'
import bj from './imgs/bj.webp'
import BasicInfo from '../Home/component/basicInfo';
 import { getUserInfoApi } from '../../api/login'
 import { useState,useEffect } from "react";
export default ()=>{
const [userIofr,setUserIofr] =useState([])
useEffect (()=>{
  getUserInfoApi({}).then(res=>{
    if (res.status === 200) {
      setUserIofr(res.data)
      localStorage.setItem("userIofr",JSON.stringify(res.data))
    }
  })
},[])
  return (
    <div className='home'>
      <div className='left'>
        <Card title="个人信息" style={{ width: 400 }} hoverable>
          <div className='left-head'>
            <Image
            className='left-bg'
              width={100}
              src={bj}
            />
          </div>
          <div className='left-foot'>
            {
             userIofr.iofrList?.map(item => {
                return (
                  <div className='left-Item' key={item.icon}>
                    <div className='item-left'>
                      <span className='icon' > <SmileTwoTone /></span>
                      <span className='lable'>{item.lable}</span>
                    </div>
                    <div className='item-right'>
                      {item.props}
                    </div>
                    <hr />
                  </div>
                )
              })
            }
          </div>
          <hr />
        </Card>
      </div>
      <div className='right'>
        <BasicInfo />
      </div>
    </div>
  )
}
